<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2610884" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">未选中</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe635;</span>
                <div class="name">选中1</div>
                <div class="code-name">&amp;#xe635;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
                <div class="name">涂鸦- pressed</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62e;</span>
                <div class="name">班级</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">上课时间</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe630;</span>
                <div class="name">上一道题</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">上一道题-不可点击</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe632;</span>
                <div class="name">注意</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe633;</span>
                <div class="name">刷新</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">贴纸</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe638;</span>
                <div class="name">编组 2</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe639;</span>
                <div class="name">编组 4</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63a;</span>
                <div class="name">编组 3</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">编组</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63d;</span>
                <div class="name">返回</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63e;</span>
                <div class="name">返回 2</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63f;</span>
                <div class="name">进入</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe640;</span>
                <div class="name">下一道题</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">上一道题-不可点击</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
                <div class="name">编辑文字-确定</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">关闭</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">确定</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">文字- pressed</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">播放</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">驳回</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">提交</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">选中</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
                <div class="name">播放中</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">答案</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">备课</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">撤回</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">关闭</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62d;</span>
                <div class="name">编组 9打分</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe637;</span>
                <div class="name">确定-不可点</div>
                <div class="code-name">&amp;#xe637;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: 
       url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAA/cAAsAAAAAHqgAAA+MAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACGXgqocKB3ATYCJAOBBAtEAAQgBYRnB4M8G6kZRUaGjQMIgnwIsv8PCZzIsLAb6KcKTNJpmN1/5Uqjr4TB9F1Z2a+u+jLfSU76MEwEv/yueE53gkkiZIgBB8GEpg0wNMHsYO8197lDKeH5//1+7XPl/YeZRUiSTJKYZPHEIkGI0EgWkk4Xi3dM+iwudaoGccuk0hguAE04tve23/Y7juTKUglup3EsssnOkJCqUOC2vwlispRIneF/S4WTCJw2DwgXl4obUpOTqjOB1mFzJPE6VhM5+dv2JaIZAFBv1DWS65mKzxaDFf3hcVv/vhOjFkQb8wYGJmVEA4rD6MBLvMzkn3hVRQ8QXLT8+2XO7lGbwraydGFusOr/3Ut5+1/KS2kLw21q6eMzKCaSvqS0LpEoBlktColkIpExziA9kM626x6fEmcctQPR/55dvyctEXjD1FPgB9eDAMFUaqAaD84uWWUetGAthktHAT+1zJMHLLf2xGScFXxXr+i45pv4AxbUsckrMU7sby/fNUgiFFbrsqCO33fYP3jYgT6NPPQHfbHLh/4VYAENlCrmLdfZ+hXtQqktgqmVGPZAKD4K4wKGWMHWsx2jESKiZzGPtZDT5UMIoSSq1aAZI1qMWHHiJUiUJFmKVEGkEdJlMFi8qwgw/weeJlMwIYQSRjgRRIrigXjSUoYCyAWis+HIXUY0HJURA8dkxMJxGXFwQkY8nJSRAKdkJMJpGUlwRkYynJWRAuc0RKMHEQQM0FADIwgBJmiohBkawALCACsIC2xAeMAWqo8diACwB+EDRxAKOIHQwBkaTcYFRDBwBREC3ECEAg8QYcATRDjwAhEBvEFEAh8QUcAP6vLVIeuphKFlm6w+/HNwOfGHi7oKM+FB7oomrK/g0Uro9wmF3D6L4JNxEgce0lte6PORgPRmDmrxzEoPGnCVkVi211NaEczPyhp2kOXxRjhZRXbwZTp/egfS7ydR0gPg8daRefleImxMAeDiFMIRkUkmdV5gUykDlegEAIkwNDFN4zWS2BOxnMlNf56KUwVKJIioIggzjz87IPMYrWCoTsQ0IZagAVUqlp/rc2nAtS5t+U0EDHNmbgMIJ5mYXnG+qh2dLsbjfCIhpVJCMslJJgah0sObebP5G0+QgPjsFuwWjl+/jKKwYOsp4LVNlyGiAbl4Ew1K9rE/C0Eg3jho4bAHY62WzEYDAJ9oNdkEujB0AvF4cqJwwSsiJAgBv9Rp2iEMU3hA0UqDcRhn1GaClTjCgBy8yVtyzpARr/BXpevCtbm3Uyw6coLaRBCa3i5jNwJKPni4iWCRYXfi/V5QcUbp2NTU66liQcsEigIl4oOqVY1vwKY46RAWURohUR40iAmobxA1ZwKDOIMnmWtdTjH7S+g4fbT/S7YjcFJi8O0U6pVMyMUbNTYenID4hicWLRhuOvWoA3hnjWij8xGXVxqPuduSyR5+pP0TQIa4PNK7IchRBgJ5LM6Ey30O/xbJjCUS4xToh/aNUpW/fNjqXdtgdLdmqYlSGT2lNGGaIc3Csb8U2QBnpBGsxXSKc8bpQ6YaK+EwHDPzGisBWETJpeBMj3sTrGuhW8VtJUQfma7VCLvs7DoEUJAyfBkwVjvU2AAoNx5mlnXU9GPnQO2hMpQlTlfjVkwG4btVZl6M0JpwXD0MOKU1OxyULrYeKQ1ErJkB+Ux5FFNxtZ2I2RKnnTdbQTjRAobBo2obwR0+d6GFjITl9Qox5WxFTGsPjRJSD5axN2I0FYapE6w4YIbHLAEZPh5HfGIy2RchqRS6ekapFhGagU1CjU3yGYsfe78A26y0GmfwLaqQaInuixwtjxZLgZHnexDZgCDFRFHNhmHUERSNFjTNHHKiJOhWS1RrtC+n8ZBELNSahSZ8gcrZ96/uywabjDvX9tcQ6ceXlG029125U41vsQT6bA4R9cIipiWqpdWbAlxjJersGaMVzhvVa+N8aJqH3rzUKkGDnvOhWejnFpLJp7btXSGTV3p4coEbPdvJUfgzZKYr2xCO25eTbW8Yfh4xnkkWujx3lkD7z5jziC8gj3+JBqXXsLvtFeJh1HleWskNCjuQZ0SECqcL2juL1MpnkdFmE+xo3e+QZkRyIEzIPW0WUc7a7XiUpocPbwomVDPbtiC5YATTg5mptY+56p97a5WoegeNEWPQim5v+cgBrk7jkRBvnLFCjGDhPtEAoQhYOP24QilXcu9lM8uIH7hcSKnINclpy5P4xINSn/joVL73nDdJmjcxv2QvZ74U+MgKKEXEkQ72cXmcJg2ENzi2D101ePmKgWsG74jMLJ9Wtnt32bTymY/EzIp1+8zyyI5v9recwcuHrnJsL3RwAxf3j8T6Lun/92jAov79Fw1Y+q+YWbG+nL+D/rG+/SMDFzs4qBC/yI3JE2oEkyYJNMI8w7QLNJMm0XWe0EDsEa301xN6ufcE3QXnA+gB/OCGNes/WLADymR9KahlB/x8KiRtfzuFZmaCVbhe/WcI8ADkNyTjrjzl3vsPnLNHB16dny+mCExXHiAlJRKyajK7Vbk7D3oM7YGL7WWrHetoCDiKMxvx7XgjE1/DFuHH2au9kayH2/Nlp73Rdo91qzEdtubust2+d3UuEvNxm0PR6SOZD80Uq5ESB/nHMAZSqvtRCp9wxN4PF/ECzLFEW5EvJKXqDinIl/W3QpitXToXHeTNO3Dq0P3xuRnb5l19sBnRXb4HOQ2txHWIkFwOV5qUDVIv0GS0C8IDz8/kAHULRyVVSqOk0eBf9PjmvpEU+KdvIMqx8oy2geY2urpZ257OJ9RkSRi6vMq3W4Ok2CUxElhJ7dUpcBKcwExiaroF9e7muWd/PDMxHRrhNfpJ2EiSp+aSWC42ZYBHctWYxwdmel3W7v7Hjn18yrpcmEuQEyaQRK7wopifN2ECQQpzLxIfoyQ5rcJmfYc36ZNb0xpQ7FdY6Fcc0FqbJ87xDsgMVFtXmhwLvXnc7Rp+aNSmufMpYTmH42hYlYs6eAQ9npnMzrUE9KlNIXUBVOfagFA+Og79eJ9RukPIYweq6oOr3kqj8B+K7DPQ9jNjR/gZX1pdQpxBccgtNtZt2aQvHmNFokQPXsndyR1B/87rUR16eeVvhXXYf2M7sAeKC9q9nBVrUB0+Di3cpAhMKJdORJR2kL/Hg/sH14PYgNtIzIeFDuPmx0RnnV+46r9J+a6kttKAQn//woDSN2JmxXrlb7YriF8FK+zkcPTwWj+SbAt3f2Dqm2ovg6UPDdQMwFBAZVjrM9Qy2/R+yl720SDdfwLKHoLgrNSoaMlGJwfPSsltx5YfK6Fln/7UmhSM++b4+VAnM+TFn1bWtXH3P33C54stpj6tSrfMrBcFaQSn1j0cf09TIZl4sB3LjctZt2F9kmbPsMWyFyA4UbL+6pOhXa8v2G1sj2b8H7PEZFA1B1kF8F8URo4haXwtE+YNF62JizNyDeJ3273btuEqeZ/Pws2bgRdUu634ziCTdmjbis1L9NRN+EHfW1fuPgaHAD1LAR+t9DOM3Tly4L27Qfxvue3mzf+4L4BTN85yhNncrTqnQevBg6cO3x9fG3FsT+LBntCceZd4oVaeI5XmyGvki23+KhDaltRAFaZSZ+vGZWJ6rHT2nPZtheLKqmgA/Ifmv/vgW//78uL2513/uH0KxBvfrv6n51oCM68v/wOjFkxUZAf86/pcU/BTrdtwV/i2bf07cmi6t7X1X+1o2EUVfpoPPZyHZfYKO9PP5mFbXhv1sIedEjF8lOUr4TCtFoGbh4f75XYKptOwpjPu0Wvsrn/n7SF2rr7Ou77aKz8D5K/VRY7hvp8l3RUq1CfDF5KoANZRuiIbpRLO3pFET1wKJkI5/LzT8U3zC/c3iIsKUYhOhYXabuhIhZYRFlJVFRI2IWzZNX2p/tvXjIzzxZ0mB5qazgX3M1kbUXmHtzXD3zJW2t34zu294TvIuHtNSvDcW+6kBb0Fv/q7aa34GNpBX4KMjtYQPvZzfG4Z9qKHc/Yt+rUtTuSWIOKBkgGN367kS8GwNJ4u/S1i5/m+JBEdTZBv1rZ6pd8N53qIEhNFHoDc1uxNqAhXgZLQCKIEs6k+xPxG3eGINP5zGOomSrTpNNNoisZUZep6pY87FixFsj52DZAu9mPzHKQEFvc9oh+2w8A32A5YznxxttpJKcvlLyDJe/w3LkMANEAp0KiS19mz/OYETDs+BXvrdpeeUzppUxTCupLpOnbjMHIXPyy+W9hWxEn6vDCZPHnatDnLqJaDU5zrBzk+S+dOnhI0dxnVKnkVnRZAfrrJIfdz/ldoBzobgGdex4lfttz6eXAtyHOHq6EPE+4FW5FdaAcyC+zCdHsfIWNgMHfFX/66PSV7PwlaEQkQMaZbTi+mlqjyT4UZGzqghPLvEUeWxir0RRTGv8amd5nXZvxNT5NcTvm/Bnr7+z9/teCSwDjVB3f2BW0A+oq3zfXkFCMu/eGo0W2GerN0Eyev76MnAAASUCgujPXL84UZBULN+ih/i14Y7ysdsaBJUAn0ydgi9AVsw0+0IaxEiUSDKSpAJLLnyTqTkoqc0Z82tI9vmFFxs4yjSH3mZei6biFFIib3H8Vq/6ntr8T+eElb9rfVtXPFfxxDP/3HN9tKczl7DvWPNuWiC/xNaPTv04jG7LxjMGTdvzP57/e9GM0pgIkqX0hV1l2k/JlvFUV2pGx+7ajdKr9R/hl1YXOLqgpdyjIuHaGA4Gs9+NPxabRPamNMo9Qn+CGbdUURIAU0dTAbDA4WX7GEUA0eDtZfCaZE08QhxFiWREwqyLeLK0KkyyuKcO5A4+A9GBx8fcUS7zN4OPj/SjB9KU8vhPz8uwpBo8OtJ062FK5ctd3bc/RMCCop/BpVTITyfqcXjT1EgaqKEeJ7b6C1y10lx/zAXBiGoeSRkgHauuNrHa10uy41QseWY7ZLQUA/b3Rwo54enmGTBLdyHf7xziGPEQKqoOXaX4l1Res9V6VcZQHLoRCFClUk45p7noF1zd/F76C0mDGuec2A0IqSuGU6IoDsg94xXSIisqLiWtlkUdER7zKeMYJxV+TlE8yKweLwRMQkpGTkFJRU1DRand5gNJktVpvd4XS5PV6hHcUD0qMB8exL4RXcZfYr0NbmCdqRwjhGJ22BCKgS+yC8EdqPAkKUgsM9kQNSU/rZN0+Uje+R4JFERhM++1SAtpUr7NkM+p7V3ONhP+MkzrogfEOkzXUeMEBAQpl+8ZGAuUe/mdM8oAcUz9S+M+iQvE6a7yDv5dtJA5DM8ucpN9St5rx6xb1ac6dKDi/49nsJeeYzngFhUcR7uaaG0bbMyAkEwQAAAA==') format('woff2'),
       url('iconfont.woff?t=1658458670827') format('woff'),
       url('iconfont.ttf?t=1658458670827') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-weixuanzhong"></span>
            <div class="name">
              未选中
            </div>
            <div class="code-name">.icon-weixuanzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xuanzhong1"></span>
            <div class="name">
              选中1
            </div>
            <div class="code-name">.icon-xuanzhong1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-tuya-pressed"></span>
            <div class="name">
              涂鸦- pressed
            </div>
            <div class="code-name">.icon-a-tuya-pressed
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-banji"></span>
            <div class="name">
              班级
            </div>
            <div class="code-name">.icon-banji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangkeshijian"></span>
            <div class="name">
              上课时间
            </div>
            <div class="code-name">.icon-shangkeshijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangyidaoti"></span>
            <div class="name">
              上一道题
            </div>
            <div class="code-name">.icon-shangyidaoti
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangyidaoti-bukedianji"></span>
            <div class="name">
              上一道题-不可点击
            </div>
            <div class="code-name">.icon-shangyidaoti-bukedianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuyi"></span>
            <div class="name">
              注意
            </div>
            <div class="code-name">.icon-zhuyi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuaxin"></span>
            <div class="name">
              刷新
            </div>
            <div class="code-name">.icon-shuaxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tiezhi"></span>
            <div class="name">
              贴纸
            </div>
            <div class="code-name">.icon-tiezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-bianzu21"></span>
            <div class="name">
              编组 2
            </div>
            <div class="code-name">.icon-a-bianzu21
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-bianzu41"></span>
            <div class="name">
              编组 4
            </div>
            <div class="code-name">.icon-a-bianzu41
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-bianzu31"></span>
            <div class="name">
              编组 3
            </div>
            <div class="code-name">.icon-a-bianzu31
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianzu"></span>
            <div class="name">
              编组
            </div>
            <div class="code-name">.icon-bianzu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fanhui1"></span>
            <div class="name">
              返回
            </div>
            <div class="code-name">.icon-fanhui1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-fanhui21"></span>
            <div class="name">
              返回 2
            </div>
            <div class="code-name">.icon-a-fanhui21
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jinru1"></span>
            <div class="name">
              进入
            </div>
            <div class="code-name">.icon-jinru1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiayidaoti1"></span>
            <div class="name">
              下一道题
            </div>
            <div class="code-name">.icon-xiayidaoti1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangyidaoti-bukedianji1"></span>
            <div class="name">
              上一道题-不可点击
            </div>
            <div class="code-name">.icon-shangyidaoti-bukedianji1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianjiwenzi-queding"></span>
            <div class="name">
              编辑文字-确定
            </div>
            <div class="code-name">.icon-bianjiwenzi-queding
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-bianzu22"></span>
            <div class="name">
              关闭
            </div>
            <div class="code-name">.icon-a-bianzu22
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-bianzu2"></span>
            <div class="name">
              确定
            </div>
            <div class="code-name">.icon-a-bianzu2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-bianzu32"></span>
            <div class="name">
              文字- pressed
            </div>
            <div class="code-name">.icon-a-bianzu32
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bofang"></span>
            <div class="name">
              播放
            </div>
            <div class="code-name">.icon-bofang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-bianzu23"></span>
            <div class="name">
              驳回
            </div>
            <div class="code-name">.icon-a-bianzu23
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-bianzu24"></span>
            <div class="name">
              提交
            </div>
            <div class="code-name">.icon-a-bianzu24
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-bianzu20"></span>
            <div class="name">
              选中
            </div>
            <div class="code-name">.icon-a-bianzu20
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bofangzhong"></span>
            <div class="name">
              播放中
            </div>
            <div class="code-name">.icon-bofangzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-bianzu6"></span>
            <div class="name">
              答案
            </div>
            <div class="code-name">.icon-a-bianzu6
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-bianzu10"></span>
            <div class="name">
              备课
            </div>
            <div class="code-name">.icon-a-bianzu10
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-bianzu5"></span>
            <div class="name">
              撤回
            </div>
            <div class="code-name">.icon-a-bianzu5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guanbi"></span>
            <div class="name">
              关闭
            </div>
            <div class="code-name">.icon-guanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-bianzu9"></span>
            <div class="name">
              编组 9打分
            </div>
            <div class="code-name">.icon-a-bianzu9
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-queding-bukedian"></span>
            <div class="name">
              确定-不可点
            </div>
            <div class="code-name">.icon-queding-bukedian
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weixuanzhong"></use>
                </svg>
                <div class="name">未选中</div>
                <div class="code-name">#icon-weixuanzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xuanzhong1"></use>
                </svg>
                <div class="name">选中1</div>
                <div class="code-name">#icon-xuanzhong1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-tuya-pressed"></use>
                </svg>
                <div class="name">涂鸦- pressed</div>
                <div class="code-name">#icon-a-tuya-pressed</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-banji"></use>
                </svg>
                <div class="name">班级</div>
                <div class="code-name">#icon-banji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangkeshijian"></use>
                </svg>
                <div class="name">上课时间</div>
                <div class="code-name">#icon-shangkeshijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangyidaoti"></use>
                </svg>
                <div class="name">上一道题</div>
                <div class="code-name">#icon-shangyidaoti</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangyidaoti-bukedianji"></use>
                </svg>
                <div class="name">上一道题-不可点击</div>
                <div class="code-name">#icon-shangyidaoti-bukedianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuyi"></use>
                </svg>
                <div class="name">注意</div>
                <div class="code-name">#icon-zhuyi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuaxin"></use>
                </svg>
                <div class="name">刷新</div>
                <div class="code-name">#icon-shuaxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tiezhi"></use>
                </svg>
                <div class="name">贴纸</div>
                <div class="code-name">#icon-tiezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-bianzu21"></use>
                </svg>
                <div class="name">编组 2</div>
                <div class="code-name">#icon-a-bianzu21</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-bianzu41"></use>
                </svg>
                <div class="name">编组 4</div>
                <div class="code-name">#icon-a-bianzu41</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-bianzu31"></use>
                </svg>
                <div class="name">编组 3</div>
                <div class="code-name">#icon-a-bianzu31</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianzu"></use>
                </svg>
                <div class="name">编组</div>
                <div class="code-name">#icon-bianzu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fanhui1"></use>
                </svg>
                <div class="name">返回</div>
                <div class="code-name">#icon-fanhui1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-fanhui21"></use>
                </svg>
                <div class="name">返回 2</div>
                <div class="code-name">#icon-a-fanhui21</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jinru1"></use>
                </svg>
                <div class="name">进入</div>
                <div class="code-name">#icon-jinru1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiayidaoti1"></use>
                </svg>
                <div class="name">下一道题</div>
                <div class="code-name">#icon-xiayidaoti1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangyidaoti-bukedianji1"></use>
                </svg>
                <div class="name">上一道题-不可点击</div>
                <div class="code-name">#icon-shangyidaoti-bukedianji1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianjiwenzi-queding"></use>
                </svg>
                <div class="name">编辑文字-确定</div>
                <div class="code-name">#icon-bianjiwenzi-queding</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-bianzu22"></use>
                </svg>
                <div class="name">关闭</div>
                <div class="code-name">#icon-a-bianzu22</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-bianzu2"></use>
                </svg>
                <div class="name">确定</div>
                <div class="code-name">#icon-a-bianzu2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-bianzu32"></use>
                </svg>
                <div class="name">文字- pressed</div>
                <div class="code-name">#icon-a-bianzu32</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bofang"></use>
                </svg>
                <div class="name">播放</div>
                <div class="code-name">#icon-bofang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-bianzu23"></use>
                </svg>
                <div class="name">驳回</div>
                <div class="code-name">#icon-a-bianzu23</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-bianzu24"></use>
                </svg>
                <div class="name">提交</div>
                <div class="code-name">#icon-a-bianzu24</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-bianzu20"></use>
                </svg>
                <div class="name">选中</div>
                <div class="code-name">#icon-a-bianzu20</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bofangzhong"></use>
                </svg>
                <div class="name">播放中</div>
                <div class="code-name">#icon-bofangzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-bianzu6"></use>
                </svg>
                <div class="name">答案</div>
                <div class="code-name">#icon-a-bianzu6</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-bianzu10"></use>
                </svg>
                <div class="name">备课</div>
                <div class="code-name">#icon-a-bianzu10</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-bianzu5"></use>
                </svg>
                <div class="name">撤回</div>
                <div class="code-name">#icon-a-bianzu5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanbi"></use>
                </svg>
                <div class="name">关闭</div>
                <div class="code-name">#icon-guanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-bianzu9"></use>
                </svg>
                <div class="name">编组 9打分</div>
                <div class="code-name">#icon-a-bianzu9</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-queding-bukedian"></use>
                </svg>
                <div class="name">确定-不可点</div>
                <div class="code-name">#icon-queding-bukedian</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
